<template>
  <view>
    <tn-popup
      v-model="isPopupVisible"
      width="95%"
      height="60%"
      open-direction="bottom"
      @close="close"
      close-btn>
      <view class="tn-m-sm tn-p-sm">
        <view class="tn-mb-xl">
          <tn-title
            size="lg"
            :title="(formType == 'create' ? '新增' : '编辑') "
            mode="hLine"
            sub-title="VehicleType"
            assist-color="tn-blue" />
        </view>
        <tn-form ref="formRef" :model="formData" label-position="top">
          <tn-form-item label="账号">
            <tn-input v-model="formData.name"></tn-input>
          </tn-form-item>
          <tn-form-item label="手机号">
            <tn-input v-model="formData.phone"></tn-input>
          </tn-form-item>
          <tn-form-item label="角色">
            <tn-bubble-box
              :options="Dict.dict.COUPON_TYPE"
              position="top"
              @click="
                confirmBubble(Dict.dict.COUPON_TYPE, 'couponType', $event)
              ">
              <tn-input
                :border="false"
                style="pointer-events: none"
                :model-value="Dict.label.COUPON_TYPE[formData.couponType]"
                placeholder="请选择角色">
                <template #suffix>
                  <tn-icon name="sort"></tn-icon>
                </template>
              </tn-input>
            </tn-bubble-box>
          </tn-form-item>
       
          <view class="tn-flex justify-between">
            <tn-button
              :shadow="true"
              shadow-color="tn-grey"
              @click="confirm"
              size="lg"
              width="100%"
              bg-color="tn-blue">
              确认
            </tn-button>
          </view>
		     <view class="tn-tabbar-height"></view>
        </tn-form>
      </view>
 
    </tn-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue"; 
import cfsheep from "@/cfsheep";
/** 页面初始化配置  */

/* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
const Dict = cfsheep.$store("dict");
  

/* 4.表单气泡选择框使用     <tn-bubble-box :options="Dict.dict.Dict.dict.COUPON_TYPE" position="top" @click="confirmBubble(Dict.dict.Dict.dict.COUPON_TYPE, 'couponType', $event)" />*/
// 确认选择器的选择
const confirmBubble = (dict, labelKey, value) => {
  console.log("confirmBubble=>", labelKey);
  console.log("confirmBubble1=>", dict[value].value);
  formData.value[labelKey] = dict[value].value;
};
/* ====================== END ====================== */

/* ====================== 弹框页面标准处理 START====================== */
// init formData
const formData = ref({
  id: "",
  name: "",
  phone: "",
  remark: "",
});

// 数据主键
const pkId = ref();
// 显示控制器
const isPopupVisible = ref(false);
// 表单的类型：create - 新增；update - 修改
const formType = ref("");
// 表单 Ref
const formRef = ref();

// 打开弹窗
const open = async (type: string, id?: number) => {
  isPopupVisible.value = true;
  formType.value = type;

  // 修改时，设置数据
  if (id) {
    // 设置修改主键
    pkId.value = id;
    try {
      // getDeatilById 获取formData 数据
    //   formData.value =  DemoAPi.value.getDetailById(id);
    } catch {}
  }
};
// 关闭弹窗
const close = () => {
  isPopupVisible.value = false;
};
// 确认事件
const confirm = () => {

    
};
// 提供 open 方法，用于打开弹窗
// 提供formData，用于接收弹窗数据 建议使用getDetailById
defineExpose({ open,formData }); 

/* ====================== END ====================== */
</script>

<style></style>
